체중 기록은 스크립트 API를 활용하는 기본 예제입니다. weight를 주요 속성으로 지정한 템플릿에서 날짜별 노트를 만들면 체중을 입력하고 시간에 따른 변화를 차트로 볼 수 있습니다.

구현 방식

체중 기록 화면은 HTML 표시 노트입니다. 자체 본문 대신 스크립트의 결과를 표시하는 영역을 제공합니다. ~renderNote 관계로 구현용 노트와 연결합니다.

구현에는 HTML과 JavaScript 코드 노트가 사용됩니다. weight 속성이 있는 노트를 모아 차트로 표시합니다. 차트 라이브러리 Chart.js는 Trilium에 내장되어 있지 않으므로 첨부 파일로 가져옵니다.

코드

다음 코드를 프런트엔드 JavaScript 코드 노트에 작성합니다.

async function getChartData() {
    const days = await api.runOnBackend(async () => {
        const notes = api.getNotesWithLabel('weight');
        const days = [];

        for (const note of notes) {
            const date = note.getLabelValue('dateNote');
            const weight = parseFloat(note.getLabelValue('weight'));

            if (date && weight) {
                days.push({ date, weight });
            }
        }

        days.sort((a, b) => a.date > b.date ? 1 : -1);

        return days;
    });

    const datasets = [
        {
            label: "체중 (kg)",
            backgroundColor: 'red',
            borderColor: 'red',
            data: days.map(day => day.weight),
            fill: false,
            spanGaps: true,
            datalabels: {
                display: false
            }
        }
    ];

    return {
        datasets: datasets,
        labels: days.map(day => day.date)
    };
}

const ctx = $("#canvas")[0].getContext("2d");

new chartjs.Chart(ctx, {
    type: 'line',
    data: await getChartData()
});

상단 버튼 숨기기

체중 기록의 연결된 노트 중 버튼 구현 노트를 찾아 본문을 지우거나 주석으로 처리하세요. Trilium을 다시 시작하면 체중 기록 버튼이 표시되지 않습니다.